<template>
    <view class="page">
        <view class="page-flex-top">
            <view class="search-input">
                <input type="text" v-model="keyWords" :confirm-type="search" @confirm="getMemberUnitList" placeholder="请输入单位名称" placeholder-style="color:#B5B5B5;">
                <icon class="search-icon" type="search" size="16"></icon>
                <img :src="File_Url+'delinput.png'" v-if="keyWords.length>0" @click.stop="clearKeywords">
            </view>
            <view class="search-btn" @click="returnBack" v-if="keyWords.length==0">
                <text>取消</text>
            </view>
            <view class="search-btn" @click="getMemberUnitList" v-if="keyWords.length>0">
                <text>搜索</text>
            </view>
        </view>
        <view class="search-list">
            <view class="null" v-if="companyData.length==0">
                <view class="tips" v-if="companyData.length==0">没有找到匹配的单位，可通过单位入驻添加单位~</view>
                <view class="btn" @click="skipCompany">单位入驻</view>
            </view>
            <view class="list-item" v-for="(item,index) in companyData" :key="index" @click="selectItem(item.name)">
                {{item.name}}
            </view>
            <view class="search-btn" v-if="companyData.length>0">
                <view class="btn" @click="skipCompany">单位入驻</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "companySearch",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                companyData:[],
                page: 1,
                total: 0,
                keyWords: '',
                userInfo: {}
            }
        },
        onLoad(query){
            this.keyWords = query.name;
            this.page = 1;
            this.getUserInfos();
            this.getMemberUnitList();
        },
        //触底叠加
        onReachBottom(){
            if (this.total < this.companyData.length){
                this.page++;
                this.getMemberUnitList();
            }
        },
        methods:{
            //获取会员单位列表
            async getMemberUnitList(){
                let params = {
                    keyword: this.keyWords,
                    limit: 9999,
                    page: this.page
                }
                const res = await this.$api.getMemberUnitList(params);
                if (res.data.level == 'success'){
                    this.companyData = res.data.data;
                    this.total = res.data.page_info.total;
                }
            },
            selectItem(name){
                let pages = getCurrentPages(); // 获取页面栈
                let prevPage = pages[pages.length - 2]; // 上一个页面
                prevPage.setData({
                    name: name // 假数据
                });
                uni.navigateBack({
                    delta: 1
                })
            },
            skipCompany(){
                if(this.userInfo.user_info.unit_settled_apply == 1){
                    uni.showToast({
                        title:'单位入驻审核中，请耐心等待',
                        icon:'none'
                    })
                } else{
                    uni.navigateTo({
                        url:'/pages/myCompany/myCompany'
                    })
                }
            },
            //返回上一层
            returnBack(){
                uni.navigateBack({
                    delta: 1
                })
            },
            clearKeywords(){
                this.keyWords = '';
            },
            //获取个人信息
            async getUserInfos(){
                let userToken=uni.getStorageSync('userToken');
                const res=await this.$api.getUserInfos({user_token:userToken});
                if(res.data.level=='success'){
                    this.userInfo=res.data.data
                }
            }
        },
        watch:{
            keyWords(newValue, oldValue){
                this.getMemberUnitList();
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        padding-top: 100rpx;
        min-height: calc(100vh - 100rpx);
        background: #F4F4F4;
    }
    .page-flex-top{
        position: fixed;
        top: 0;
        left: 0;
        height: 60rpx;
        width: calc(100vw - 80rpx);
        background: #FFFFFF;
        padding: 20rpx 40rpx;
        @include flex(flex-start);
        flex-direction: row;
        .search-input{
            width: calc(100% - 86rpx);
            position: relative;
            input{
                padding: 0rpx 20rpx 0rpx 70rpx;
                background: rgba(219, 219, 219, 0.2);
                border-radius: 30rpx;
                border: 2rpx solid rgba(219, 219, 219, 0.3);
                height: 48rpx;
                font-size: 28rpx;
                color: #333333;
                line-height: 48rpx;
            }
            .search-icon{
                position: absolute;
                top: 10rpx;
                left: 20rpx;
            }
            img{
                width: 62rpx;
                height: 40rpx;
                position: absolute;
                z-index: 9999;
                top: 7rpx;
                right: 15rpx;
                padding: 4rpx 0 4rpx 30rpx;
            }
        }
        .search-btn{
            margin-left: auto;
            text{
                width: 56rpx;
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                color: #333333;
            }
        }
    }
    .search-list{
        width: 100vw;
        .list-item{
            font-size: 32rpx;
            height: 100rpx;
            line-height: 100rpx;
            padding: 0 30rpx;
            background: #ffffff;
            border-bottom: 1rpx solid #eee;
        }
        .null{
            @include flex();
            flex-direction: column;
            .tips{
                padding: 40rpx 0;
                width: 100%;
                font-size: 28rpx;
            }
            .btn{
                /*width: 100rpx;*/
                padding: 20rpx 50rpx;
                background: #007aff;
                font-size: 28rpx;
                color: #ffffff;
                border-radius: 16rpx;
            }
        }
        .search-btn{
            position: fixed;
            bottom: 15px;
            left: 50%;
            transform: translate(-50%,0);
            @include flex();
            flex-direction: column;
            .tips{
                padding: 40rpx 0;
                width: 100%;
                font-size: 28rpx;
            }
            .btn{
                /*width: 100rpx;*/
                padding: 20rpx 50rpx;
                background: #007aff;
                font-size: 28rpx;
                color: #ffffff;
                border-radius: 16rpx;
            }
        }
    }
</style>
